<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="layout">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/my.css">
    <title>我的</title>
    <meta name="referer" content="never">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
</head>

<body>
<div th:fragment="content">
<div class="minepage">
    <div class="section-switcher">
        <div class="section-header">
            <ul class="container">
                <li><a href="">我的红心</a></li>
                <li><a href="">我的收藏</a></li>
                <li><a href="">我制作的歌单</a></li>
                <li><a href="">我喜欢的艺术家</a></li>
            </ul>
        </div>
    </div>
    <div class="section-content">
        <div class="page-heart">
            <div class="header-cover">
                <button><svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-caret-right-fill"
                             fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
                </svg></button>
                <div class="num"><span>3首红心歌曲</span></div>

                <div class="fr">
                    <div class="bZDQzH">
                        <div id="fr" class="jNcLzX">下载豆瓣FM APP 让好音乐继续</div>
                        <div id="img" class="isWlzM">
                            <div class="jBvxsI"><img width="90" height="90"
                                                     src="https://img3.doubanio.com/f/fm/1e89298732fbf090aea0812f7fb2af30ad82ab61/pics/fm/landingpage/qr_2@2x.png"
                                                     alt="FM APP"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="song-container">
                <ul class="songlist">
                    <li id="songlistsong" class="songlist-song">
                        <div class="top">
                            <span class="index">1</span>
                            <div class="cover"></div>
                            <div class="titles">
                                <h3><span class="link" title="Amazing Grace">Amazing Grace</span></h3>
                                <p><a class="link artist-name" title="William Joseph">William Joseph</a></p>
                            </div>
                            <div id="actions" class="actions">
                                <a href="" class="like" title="取消红心">
                                    <svg viewBox="0,0,30,30" height="12" width="12" class="icon icon-heart"
                                         style="vertical-align: middle;">
                                        <desc></desc>
                                        <g id="Page-1" stroke="none" stroke-width="1" fill="none"
                                           fill-rule="evenodd">
                                            <path
                                                    d="M22,0 C18.9359565,0 16.5821582,1.72596986 15,3.5 C13.4530656,1.72596986 11.0993172,0 8,0 C3.7559698,0 0,3.9236383 0,9 C0,12.0105248 0.844640658,15.0729547 2.5,18 C6.88109125,25.6681877 15.0243286,28.9632358 15,29 C15.0243286,28.9631844 22.9314319,25.7540044 27.5,18 C29.1765036,15.1251042 30.0352238,12.2324468 30,9 C30.0352238,3.9236383 26.2791541,0 22,0 Z"
                                                    id="b" fill="#FF2C56"></path>
                                        </g>
                                    </svg>
                                </a>
                                <a href="#"><i href="#" class="icon icon-add" style="background-image: url(&quot;//img3.doubanio.com/dae/staticng/s/bragi/5c02cfc1f8edbb05fab15d946080d7acc8dc10fb/deploy/891998ab0803fdbf39a842d2de0950d9.svg&quot;); background-size: 18px 18px; display: inline-block; height: 18px; width: 18px;"></i></a>
                                <a href="#"><i href="#" class="icon icon-more" style="background-image: url(&quot;//img3.doubanio.com/dae/staticng/s/bragi/5c02cfc1f8edbb05fab15d946080d7acc8dc10fb/deploy/ded98095f5899082cd1caad73f10f951.svg&quot;); background-size: 18px 18px; display: inline-block; height: 18px; width: 18px;"></i></a>
                            </div>
                        </div>
                    </li>
                </ul>

            </div>
        </div>

    </div>

</div>
    <script type="text/javascript" th:inline="javascript">
        let qr = document.getElementById("fr");
        let img = document.getElementById("img");

        function show() {
            img.style.display = "block";
        };

        function dishow() {
            img.style.display = "none";
        }
        qr.addEventListener("mouseenter", show);
        qr.addEventListener("mouseleave", dishow);
        $(document).ready(function(){
            $("#songlistsong").mouseenter(function(){
                $("#actions").show();
                console.log("enter");
            });
            $("#songlistsong").mouseleave(function(){
                $("#actions").hide();
            });
        });

    </script>
</div>
</body>


</html>